<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>我的账单</title>
    <script type="text/javascript" src="https://libs.cdnjs.net/vue/2.6.11/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"/>
</head>
<body>


<div id="app" style="height: 100%" v-cloak>
    <div ref="container">

            <van-sticky :container="container" :z-index="99">
            <div class="tbc-flex-row"
                 style="flex-direction: row;height: 55px;background-color: #F5F5F5;justify-content: center;align-items: center;padding: 0 15px">
                <div class="tbc-flex-row"
                     style="background-color: #FFF;border-radius: 13px;height: 26px;width: 88px;justify-content: center;flex-direction: row;align-items: center;">
                    <div>
                        <span style="color: #333;font-size: 13px;">2019-11</span>
                    </div>
                    <div style="width: 8px;height: 6px;margin-left: 8px;">
                        <image src="/static/icon/triangle-down.png" style="width: 8px;height: 6px;"></image>
                    </div>
                </div>
                <div style="flex: 1;"></div>
            </div>
        </van-sticky>


        <div style="padding:0 15px;background-color: #FFF;">
            <div class="tbc-flex-col"
                 style="flex-direction: column;border-bottom-width: 1px;border-color: #EFEFEF;justify-content: center;background-color: #FFF;padding-top:15px;padding-bottom: 15px;width: 100%"
                 v-for="i in 20" :key="i">
                <div class="tbc-flex-row" style="flex-direction: row;">
                    <div style="flex:1">
                        <span style="font-size: 17px;color: #333;">提现</span>
                    </div>
                    <span style="font-size: 18px;color: #333;font-weight: bold;">-100</span>
                </div>
                <div class="tbc-flex-row" style="flex-direction: row;margin-top: 5px;">
                    <div style="flex:1">
                        <span style="font-size: 14px;color: #7F7F7F;">12月1日 12:00</span>
                    </div>
                </div>
            </div>
        </div>
        <van-sticky :container="container">
            <div class="tbc-flex-row"
                 style="flex-direction: row;height: 55px;background-color: #F5F5F5;justify-content: center;align-items: center;padding: 0 15px">
                <div class="tbc-flex-row"
                     style="background-color: #FFF;border-radius: 13px;height: 26px;width: 88px;justify-content: center;flex-direction: row;align-items: center;">
                    <div>
                        <span style="color: #333;font-size: 13px;">2019-12</span>
                    </div>
                    <div style="width: 8px;height: 6px;margin-left: 8px;">
                        <image src="/static/icon/triangle-down.png" style="width: 8px;height: 6px;"></image>
                    </div>
                </div>
                <div style="flex: 1;"></div>
            </div>
        </van-sticky>


        <div style="padding:0 15px;background-color: #FFF;">
            <div class="tbc-flex-col"
                 style="flex-direction: column;border-bottom-width: 1px;border-color: #EFEFEF;justify-content: center;background-color: #FFF;padding-top:15px;padding-bottom: 15px;width: 100%"
                 v-for="i in 20" :key="i">
                <div class="tbc-flex-row" style="flex-direction: row;">
                    <div style="flex:1">
                        <span style="font-size: 17px;color: #333;">提现</span>
                    </div>
                    <span style="font-size: 18px;color: #333;font-weight: bold;">-100</span>
                </div>
                <div class="tbc-flex-row" style="flex-direction: row;margin-top: 5px;">
                    <div style="flex:1">
                        <span style="font-size: 14px;color: #7F7F7F;">12月1日 12:00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <van-popup v-model="show" position="bottom" :style="{ height: '220px' }">
        <van-datetime-picker
                v-model="currentDate"
                type="year-month"
                title="选择年月日"
                :min-date="minDate"
                :max-date="maxDate"
        />
    </van-popup>

</div>
<script type="text/javascript">

    init();

    function init() {
        new Vue({
            el: '#app',
            data: {
                baseUrl: 'https://admin.jc.jicaistore.com',
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(), show: false,
                count: 0,
                isLoading: false,
                container: null,
            },

            created: function () {
                this.http = axios.create({
                    baseURL: this.baseUrl,
                    timeout: 1000,
                    headers: {
                        'token': location.query('_token'),
                        'warehouse': location.query('_warehouse'),
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                })
                this.getBillList()
            },

            mounted: function () {
                this.container = this.$refs.container;
            },

            methods: {

                async getBillList() {
                    let res = await this.http.get('/api/account/findMyAccountTransactionRecord', {
                        params: {nowpage: 2}
                    })
                    if (res.data.code !== 1) return vant.Toast.fail(res.data.message);
                    console.log(res)
                },


            }
        })
    }
</script>
</body>
</html>